<template>
  <!-- 景区景点容器 -->
  <div class="scenic-spot-container">

    <view class="return-btn" @click="goToHome" hover-class="none">
      <image src="/static/logo/返回.png" mode="widthFix" class="return-icon"></image>
    </view>
    <!-- 遍历景点数据，生成多个景点项 -->
    <div
        class="scenic-spot-item"
        v-for="(spot, index) in scenicSpots"
        :key="index"
    >
      <!-- 景点图片区域 -->
      <div class="scenic-spot-image">
        <img :src="spot.image" alt="景区图片" mode="widthFix"/>
      </div>

      <!-- 景点信息区域 -->
      <div class="scenic-spot-info">
        <!-- 景点名称 -->
        <h2 class="scenic-spot-name">{{ spot.name }}</h2>
        <!-- 购票按钮（使用view模拟按钮样式） -->
        <view class="scenic-spot-ticket-btn" @click="handleTicketClick(index)"
        >{{ spot.ticketText }}
        </view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scenicSpots: [
        {
          name: '青城前山景区',
          image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B4%AD%E7%A5%A8/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%89%8D%E5%B1%B1.jpg',
          ticketText: '购票'
        },
        {
          name: '青城后山景区',
          image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B4%AD%E7%A5%A8/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%90%8E%E5%B1%B11.jpg',
          ticketText: '购票'
        }
      ]
    };
  },
  methods: {
    handleTicketClick(index) {
      let path = '';
      if (index === 0) {
        path = '/pages/qianshan/qianshan';
      } else if (index === 1) {
        path = '/pages/houshan/houshan';
      }
      // uni-app
      uni.redirectTo({
        url: path
      });

    },
    goToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    }
  },

};
</script>

<style lang="scss">
.return-btn {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.return-icon {
  width: 100%;
  height: 100%;
}
/* 主容器样式 */
.scenic-spot-container {
  background-color: #f0f8ff; /* 淡蓝色背景 */
  padding: 20px; /* 内边距 */
}

/* 单个景点项样式 */
.scenic-spot-item {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 内容左右分布 */
  align-items: center; /* 垂直居中 */
  background-color: #fff; /* 白色背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-bottom: 20px; /* 底部外边距 */
  overflow: hidden; /* 隐藏溢出内容 */
  gap: 20rpx; /* 子元素间距（兼容小程序rpx单位） */
}

/* 图片区域样式 */
.scenic-spot-image {
  width: 40%; /* 宽度占40% */
  height: 100%; /* 高度充满父容器 */
  overflow: hidden; /* 隐藏图片溢出部分 */
  img {
    width: 100%; /* 图片宽度充满容器 */
    /* height: auto; 由mode="widthFix"自动处理 */
  }
}

/* 信息区域样式 */
.scenic-spot-info {
  flex: 1; /* 占据剩余空间 */
  padding: 20px 0; /* 上下内边距 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 纵向排列 */
}

/* 景点名称样式 */
.scenic-spot-name {
  font-size: 34rpx; /* 字体大小（小程序单位） */
  font-family: '黑体'; /* 字体类型 */
  font-weight: bolder; /* 加粗 */
  margin-bottom: 10px; /* 底部外边距 */
}

/* 购票按钮样式 */
.scenic-spot-ticket-btn {
  background-color: #6ab04c; /* 绿色背景 */
  color: white; /* 白色文字 */
  padding: 5px 30px; /* 内边距 */
  text-decoration: none; /* 去除下划线 */
  display: inline-block; /* 行内块元素 */
  font-size: 16px; /* 字体大小 */
  border-radius: 20px; /* 圆角按钮 */
  cursor: pointer; /* 鼠标悬停手型 */
}
</style>
